<template>
  <div>
    <a-spin size="large" :spinning="spinning">
      <group-search :items="items" @chartLoad="init" v-if="head.dataType === 'sql' && !propsChartData"></group-search>
      <a-card style="margin-top:10px;text-align: center;" :title="false" v-if="chartData.length<=0" >
        <h1 >没有查询到任何数据</h1>
      </a-card>
      <div v-else>
        <a-card size="small" v-if="head.graphType !== 'table'" :title="head.name">
          <slot v-if="head.graphType !== 'table'" name="extra_" slot="extra"></slot>
          <tab-graphreport-auto-chart
            v-if="head.displayTemplate === 'tab'"
            :chartData="chartData"
            :head="head"
            :graphTypeDictOptions = "graphTypeDictOptions"
          >
          </tab-graphreport-auto-chart>
          <row-graphreport-auto-chart
            v-else-if="head.displayTemplate === 'single' || head.displayTemplate === 'double'"
            :chartData="chartData"
            :head="head"
            :graphTypeDictOptions = "graphTypeDictOptions"
            :col="getCol()"
          >
          </row-graphreport-auto-chart>
        </a-card>
        <a-card style="margin-top:10px;" :title="head.name + '数据明细'" v-if="head.graphType && head.graphType.indexOf('table')>=0" >
          <graphreport-auto-table :items="items" :cggraphreportData="cggraphreportData" :chartData="chartData"></graphreport-auto-table>
        </a-card>
      </div>
    </a-spin>
  </div>
</template>
<script>
// import { mapState } from 'vuex'
import TabGraphreportAutoChart from '../components/TabGraphreportAutoChart'
import RowGraphreportAutoChart from '../components/RowGraphreportAutoChart'
import GraphreportAutoTable from '../components/GraphreportAutoTable'
import GroupSearch from '../components/GroupSearch'
// import { initDictOptions } from '@/components/dict/JDictSelectUtil'
import { getAction } from '@/api/manage'
export default {
  name: 'OnlGraphreportAutoChart',
  mixins: [],
  components: {
    TabGraphreportAutoChart,
    RowGraphreportAutoChart,
    GraphreportAutoTable,
    GroupSearch
  },
  computed: {
    graphTypeDictOptions() { // 获取需要渲染的图表类型
      var graphTypes = this.head.graphType || []
      var charts = []
      this.onlineGraphType.forEach(function(item, i) {
        if (graphTypes.indexOf(item.value) >= 0 && item.value !== 'table') {
          charts.push(item)
        }
      })
      return charts
    }
  },
  data() {
    return {
      url: {
        list: '/diagram/diagramConfiguration/getChartsData'
      },
      // chartData: {
      //   // barMultidDataSource: {},
      //   // lineMultidDataSource: {},
      //   sqlData: []
      // },
      chartData: [],
      head: {},
      items: [],
      onlineGraphType: [
        { text: '柱状图', value: 'bar' },
        { text: '曲线图', value: 'line' },
        { text: '饼图', value: 'pie' },
        { text: '条形图', value: 'transverseBarMuiltid' },
        { text: '雷达图', value: 'radar' },
        { text: '漏斗图', value: 'funnel' },
        { text: '数据表格', value: 'table' }
      ], // 图表类型字典
      spinning: true,
      cggraphreportData: {}
    }
  },
  watch: {
    $route() {
      this.init()
    }
  },
  props: ['propsChartData'],
  created() {
    this.init()
  },
  mounted() {

  },
  methods: {
    init(queryParam) {
      if (this.propsChartData) {
        this.setChartData(JSON.parse(JSON.stringify(this.propsChartData)))
        this.spinning = false
        this.cggraphreportData = JSON.parse(JSON.stringify(this.propsChartData))
      } else {
        const url = this.$route.fullPath
        const code = url.replace('/online/cggraphreport/chart/', '')
        this.spinning = true
        if (queryParam) {
          queryParam = encodeURI(JSON.stringify(queryParam))
        }
        getAction(this.url.list, { code: code, params: queryParam || '' }).then((res) => { // 根据code获取渲染数据
          if (res.success) {
            this.setChartData(res.result)
            this.cggraphreportData = res.result
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.spinning = false
        })
      }
    },
    // getBarMultidDataSource() { // 根据json数据组合成分组柱状图需要的数据
    //   const data = []; const fields = []
    //   const types = this.head.yaxisField.split(',')
    //   const that = this
    //   const xaxisField = this.head.xaxisField
    //   types.forEach(function(key, i) {
    //     const obj = { type: key }
    //     that.chartData.sqlData.forEach(function(item, i) {
    //       var key2 = item[xaxisField]
    //       fields.push(key2)
    //       obj[key2] = item[key]
    //     })
    //     data.push(obj)
    //   })
    //   return {
    //     data: data,
    //     fields: fields
    //   }
    // },
    // getLineMultidDataSource() { // 根据json数据组合成折线图需要的数据
    //   const data = []; const fields = []
    //   const yaxisFields = this.head.yaxisField.split(',')
    //   const xaxisField = this.head.xaxisField
    //   this.chartData.sqlData.forEach(function(item, i) {
    //     const obj = { type: item[xaxisField] }
    //     yaxisFields.forEach(function(key, i) {
    //       fields.push(key)
    //       obj[key] = item[key]
    //       data.push(obj)
    //     })
    //   })
    //   return {
    //     data: data,
    //     fields: fields
    //   }
    // },
    setChartData(data) { // 设置基础data
      this.head = data.head
      this.items = data.items
      var sqlData = []
      if (data.head.dataType === 'json' && data.head.cgrSql) {
        sqlData = JSON.parse(data.head.cgrSql.replace(/↵/g, ''))
      } else if (data.head.dataType === 'sql' && data.head.aggregate === true) {
        sqlData = data.data.aggregate
      } else if (data.head.dataType === 'sql' && data.head.aggregate === false) {
        sqlData = data.data.data
      }
      this.chartData = sqlData
      // const barMultidDataSource = this.getBarMultidDataSource()
      // this.chartData.barMultidDataSource.data = barMultidDataSource.data
      // this.chartData.barMultidDataSource.fields = barMultidDataSource.fields
      // const lineMultidDataSource = this.getLineMultidDataSource()
      // this.chartData.lineMultidDataSource.data = lineMultidDataSource.data
      // this.chartData.lineMultidDataSource.fields = lineMultidDataSource.fields
    },
    getCol() {
      const graphTypes = this.head.graphType.split(',')
      if (this.head.displayTemplate === 'single') {
        return { xl: 24, lg: 24, md: 24, sm: 24 }
      } else if (this.head.displayTemplate === 'double' && graphTypes.length > 1) {
        return { xl: 12, lg: 12, md: 12, sm: 12 }
      } else if (this.head.displayTemplate === 'double' && graphTypes.length <= 1) {
        return { xl: 24, lg: 24, md: 24, sm: 24 }
      }
      return {}
    }
  }
}
</script>
<style scoped>
.ant-table td { white-space: nowrap; }
</style>
